import React from 'react'
// 1.导入模块名称，来自swiper模块
import { Autoplay, Navigation, Pagination, EffectCube } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/react';
// 2.导入模块样式
import 'swiper/css'
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/effect-cube';

export default function MySwiper(props) {
  return (
    <Swiper
    // modules={[模块名称]}
        modules={[Navigation, Pagination, Autoplay, EffectCube]}
        // 继续配置swiper标签，模块名小写
        // navigation
        pagination={{clickable:true}}
        autoplay={{
            delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: false,
        }}
        loop
        // effect='cube'
        // effectCube={{
        //   slidesShadows: true,
        //   shadow: true,
        //   shadowOffset: 50,
        //   shadowScale: 0.6,
        // }}
        slidesPerView={1}
        // onSlideChange={() => console.log('slide change')}
        onSwiper={(swiper) => {
          // console.log(swiper);
          swiper.slideTo(1)
        }}
    >
          {
            props.arr.map(ele=>{
              return <SwiperSlide key={ele.id}>
                  <img src={ele.imgUrl} width="100%" alt="" />
              </SwiperSlide>
            })
          }
    </Swiper>
  )
}
